let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d')

function uploadBg() {
    let file = document.getElementById('upBg').files[0]
    let reader = new FileReader();

    reader.onload = function (e) {
        let image = new Image();
        image.src = e.target.result;

        image.onload = function () {
            canvas.width = image.width;
            canvas.height = image.height;
            ctx.drawImage(image, 0, 0, image.width, image.height);
        }
    }

    reader.readAsDataURL(file);
}

function upLoadAvatar() {
    let file = document.getElementById('upImg').files[0]
    let reader = new FileReader();

    reader.onload = function (e) {
        let image = new Image();
        image.src = e.target.result;

        image.onload = function () {
            let width = canvas.width * .2;
            let x = canvas.width - (canvas.width * .2);
            let y = canvas.height / 2;
            let arcRadius = width / 2
            ctx.lineWidth = canvas.width / 375 * 5;
            ctx.strokeStyle = 'white';
            ctx.arc(x, y, arcRadius, 0, 2*Math.PI);
            ctx.stroke();
            ctx.clip();
            ctx.restore();
            ctx.drawImage(image, x - arcRadius, y - arcRadius, arcRadius * 2, image.height * arcRadius * 2 / image.width);

            saveCanvasToImage();
        }
    }

    reader.readAsDataURL(file);
}

// 保存canvas为图片
function saveCanvasToImage() {
    let url = canvas.toDataURL('image/png');
    document.getElementById('savePicture').href = url;
    console.log(url)
}